<template>
  <div style="height: 100%" class="shadow">
    <breadcrumb
      :titleArr="['在线座席日志', '座席状态详情']"
      @back="goBack"
      class="bread-crumb"
    ></breadcrumb>
    <div class="page-content">
      <resizeTable
        ref="table"
        v-if="showTable"
        :headers="tableHeaders"
        :data="tableData"
        :pagingData="pagingData"
        @pageChange="handleCurrentChange"
        @pageSizeChange="handleSizeChange"
        @checkHeadersChange="checkHeadersChange"
        :headersConfig="false"
      >
        <template slot="column">
          <template v-for="(item, index) in checkHeaders">
            <u-table-column
              v-if="item.show && item.prop !== 'oprate'"
              :key="index"
              :label="item.label"
              :prop="item.prop"
              :sortable="item.sortable"
              :min-width="item.width || 80"
            >
            <template slot-scope="scope">
              <span v-if="item.prop.includes('count')">{{ scope.row[item.prop] || 0 }}</span>
              <span v-else-if="item.prop.includes('time')">{{ scope.row[item.prop] || '00:00:00' }}</span>
              <span v-else>{{ scope.row[item.prop] }}</span>
            </template>
            </u-table-column>
            <u-table-column
              v-if="item.show && item.prop === 'oprate'"
              :key="index"
              :label="item.label"
              :resizable="false"
              :width="80"
              fixed="right"
            >
              <template slot-scope="scope">
                <span class="oprate-span" @click="openRangeDrawer(scope.row)">查看</span>
              </template>
            </u-table-column>
          </template>
        </template>
      </resizeTable>
    </div>
    <RangeDrawer ref="rangeDrawer"></RangeDrawer>
  </div>
</template>

<script lang="ts">
/**
 * 在线座席日志-座席状态详情组件
 * @Prop detailId 记录的id
 * @Prop detailTime 父级页面筛选时间
 */
import { Vue, Component, Ref, Prop } from 'vue-property-decorator'
import { commonAction } from '@/utils/common'
import RangeDrawer from './RangeDrawer.vue'
import resizeTable from '@/components/globalTool/resizeTable/index.vue'
import breadcrumb from '@/components/breadcrumb/breadcrumb.vue'
import { getTime, mixHeader, getAgentName, getAllStatusCount, getStatus } from './index'
@Component({
  name: 'Detail',
  components: {
    RangeDrawer,
    resizeTable,
    breadcrumb
  }
})
export default class Detail extends Vue {
  @Ref() private readonly rangeDrawer: any
  @Prop(String) private detailId
  @Prop() private detailTime
  private tableData: any = []
  private pagingData: any = { total: 0, limit: 10, page: 1 }
  private checkHeaders: [] = []
  private showTable = false

  private goBack () {
    this.$emit('closePage')
  }

  // 加载数据
  private async getData () {
    const actionData: any = {
      limit: this.pagingData.limit,
      page: this.pagingData.page,
      agentId: this.detailId,
      createTime: this.detailTime
    }
    const data: any = await commonAction({ url: '/im-center/action/userLog/imUserLog/agentList', method: 'POST', data: actionData })
    if (data.success) {
      // 预处理数据，增加表头对应属性值
      this.tableData = data.data.list.map(v => {
        const object = { ...v }
        object.agentName = getAgentName(v.agentNumber)
        object.onlineTimeLength = getTime(v.onlineTimeLength)
        object.loginStatus = getStatus(v.loginStatus)
        const map = object.statusConfigInfo
        object.statusCount = getAllStatusCount(map)
        for (const i in map) {
          object[i + 'count'] = map[i].count || 0
          object[i + 'time'] = getTime(map[i].timeLength)
        }
        return object
      })
      this.pagingData.total = data.data.count
    }
  }

  private async mounted () {
    // 初始化表头
    const header = await mixHeader()
    this.tableHeaders = [
      { label: '座席', prop: 'agentName', width: 150 },
      { label: '登录时间', prop: 'loginTime', width: 150 },
      { label: '登录IP', prop: 'ip', width: 150 },
      { label: '登录状态', prop: 'loginStatus' },
      { label: '离线时间', prop: 'logoutTime', width: 150 },
      ...header.count,
      { label: '自定义状态次数', prop: 'statusCount', width: 120 },
      { label: '在线时长', prop: 'onlineTimeLength' },
      ...header.time,
      { label: '操作', prop: 'oprate', disenable: true }
    ]
    this.showTable = true
    this.getData()
  }

  private tableHeaders: object[] = []

  // 查看详情
  private openRangeDrawer (row) {
    this.rangeDrawer.openDraw(row)
  }

  private checkHeadersChange (checkList) {
    this.$set(this, 'checkHeaders', checkList)
  }

  private handleSizeChange (size: number) {
    this.pagingData.limit = size
    this.getData()
  }

  private handleCurrentChange (page: number) {
    this.pagingData.page = page
    this.getData()
  }
}
</script>
<style lang="stylus" scoped>
.page-content
  box-sizing border-box
  height calc(100% - 56px)
  padding 0px 10px
.oprate-span
  cursor pointer
  color $c-main
  margin 0 4px
</style>
